<template>
    <div class="course-learning-page">
      <!-- 筛选区域 -->
      <el-row class="filter-row">
        <el-col :span="8">
          <el-select v-model="selectedCategory" placeholder="选择课程类别">
            <el-option
              v-for="category in categoryOptions"
              :key="category.value"
              :label="category.label"
              :value="category.value"
            />
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-input v-model="searchKeyword" placeholder="搜索课程名称" clearable />
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="filterCourses">筛选</el-button>
        </el-col>
      </el-row>
  
      <!-- 课程列表 -->
      <el-table :data="displayCourses" border stripe>
        <el-table-column prop="name" label="课程名称" />
        <el-table-column prop="instructor" label="讲师" />
        <el-table-column prop="category" label="类别" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="showCourseDetails(scope.row)">查看详情</el-button>
            <el-button type="text" @click="startLearning(scope.row)">开始学习</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalCourses"
        layout="prev, pager, next"
        @current-change="handleCurrentPageChange"
      />
  
      <!-- 课程详情模态框 -->
      <el-dialog
        v-model="courseDetailsVisible"
        title="课程详情"
        width="50%"
      >
        <div v-if="selectedCourse">
          <img :src="selectedCourse.thumbnail" alt="课程封面" class="course-thumbnail" />
          <p><strong>课程描述：</strong> {{ selectedCourse.description }}</p>
          <p><strong>课程目标：</strong> {{ selectedCourse.objectives }}</p>
        </div>
        <template #footer>
          <el-button @click="courseDetailsVisible = false">关闭</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        courses: [
          {
            id: 1,
            name: 'Python 高级编程',
            instructor: '林俊浩',
            category: '编程',
            thumbnail: 'python_thumbnail.jpg',
            description: '深入学习 Python 的高级特性。',
            objectives: '掌握复杂的 Python 编程技巧。',
          },
          {
            id: 2,
            name: 'UI 设计实战',
            instructor: '王冰',
            category: '设计',
            thumbnail: 'ui_thumbnail.jpg',
            description: '通过实际案例学习 UI 设计。',
            objectives: '提升 UI 设计能力。',
          },
          {
            id: 3,
            name: '高中数学',
            instructor: '陈建',
            category: '高中数学',
            thumbnail: 'ui_thumbnail.jpg',
            description: '通过实际案例学习数学。',
            objectives: '提升数学成绩。',
          },
          {
            id: 4,
            name: '数据挖掘',
            instructor: '杨仕威',
            category: '数据挖掘',
            thumbnail: 'ui_thumbnail.jpg',
            description: '通过实际案例学习数据挖掘。',
            objectives: '提升数据挖掘能力。',
          },
          {
            id: 5,
            name: '前端课程',
            instructor: '段天彩',
            category: '前端课程',
            thumbnail: 'ui_thumbnail.jpg',
            description: '通过实际案例学习前端设计。',
            objectives: '提升前端编程能力。',
          },
          {
            id: 6,
            name: '后端课程',
            instructor: '张胜男',
            category: '后端课程',
            thumbnail: 'ui_thumbnail.jpg',
            description: '通过实际案例学习后端设计。',
            objectives: '提升后端编程能力。',
          },
          {
            id: 7,
            name: '数据可视化',
            instructor: '贾利春',
            category: '编程',
            thumbnail: 'ui_thumbnail.jpg',
            description: '通过实际案例学习数据可视化设计分析。',
            objectives: '提升前端设计编程能力。',
          },
          
          // 更多课程数据
        ],
        selectedCategory: '',
        searchKeyword: '',
        displayCourses: [],
        currentPage: 1,
        pageSize: 10,
        totalCourses: 0,
        courseDetailsVisible: false,
        selectedCourse: null,
        categoryOptions: [
          { value: '编程', label: '编程' },
          { value: '设计', label: '设计' },
          { value: '语言学习', label: '语言学习' },
          { value: '前端课程', label: '前端课程' },
          { value: '后端课程', label: '后端课程' },
          { value: '数据挖掘', label: '数据挖掘' },
          { value: '高中数学', label: '高中数学' },
        ],
      };
    },
    created() {
      this.displayCourses = this.courses.slice(0, this.pageSize);
      this.totalCourses = this.courses.length;
    },
    methods: {
      filterCourses() {
        let filtered = this.courses;
        if (this.selectedCategory) {
          filtered = filtered.filter(course => course.category === this.selectedCategory);
        }
        if (this.searchKeyword) {
          filtered = filtered.filter(course => course.name.includes(this.searchKeyword));
        }
        this.totalCourses = filtered.length;
        this.displayCourses = filtered.slice(0, this.pageSize);
        this.currentPage = 1;
      },
      handleCurrentPageChange(page) {
        this.currentPage = page;
        const startIndex = (page - 1) * this.pageSize;
        this.displayCourses = this.courses.slice(startIndex, startIndex + this.pageSize);
      },
      showCourseDetails(course) {
        this.selectedCourse = course;
        this.courseDetailsVisible = true;
      },
      startLearning(course) {
        console.log(`开始学习课程：${course.name}`);
      },
    },
  };
  </script>
  
  <style scoped>
  .course-learning-page {
    padding: 20px;
    width: 1300px;
    height: auto;
    margin-left: 180px;
    background-color: rgba(101, 153, 130, 0.145);
  }
  .filter-row {
    margin-bottom: 20px;
  }
  .course-thumbnail {
    width: 100%;
    margin-bottom: 10px;
  }
  </style>